class Banner {
	constructor(ban,oimg, olis) {
		this.index = 0;
		this.ban=ban;
		this.oimg = oimg;
		this.oli = olis;
		this.oimg.style.backgroundImage = "url(img/" + this.index + ".jpg)";
		this.oli[this.index].style.backgroundColor = "red";
		this.ban.style.backgroundColor="#000";
		this.color=["#6cc7f3","#000000","#e6884a","#9e040e","#000000","#ffbc16"];
		this.time1 = null;
		this.time2 = null;
	}

	setImg() {
		this.oimg.style.backgroundImage = "url(img/" + this.index + ".jpg)";
	}
	setLiColor() {
		for (let i = 0; i < this.oli.length; i++) {
			if (this.index == i) {
				this.oli[i].style.backgroundColor = "red";
				this.ban.style.backgroundColor=this.color[i];
			} else {
				this.oli[i].style.backgroundColor = "#abbac6";
			}
		}
	}
	prev() {
		this.index--;
		if (this.index < 0) {
			this.index = this.oli.length - 1;
		}
		this.setImg();
		this.setLiColor();
	}
	next() {
		this.index++;
		if (this.index > this.oli.length - 1) {
			this.index = 0;
		}
		this.setImg();
		this.setLiColor();
	}
	move() {
		let that = this;
		this.time1 = setInterval(function() {
			that.next();
			that.setImg();
			that.setLiColor();
		}, 1000);
	}
	bindEvent() {
		let that = this;
		let oBtnNext = document.querySelector("#btn-previous ");
		let oBtnPrev = document.querySelector("#btn-next");
		oBtnNext.onclick = function() {
			that.next();
		}
		oBtnPrev.onclick = function() {
			that.prev();
		}
		for (let i = 0; i < this.oli.length; i++) {
			this.oli[i].onclick = function() {
				that.index = i;
				that.setImg();
				that.setLiColor();
			}
		}
		this.move();
		this.oimg.onmouseover = function() {
			clearInterval(that.time1);
		}
		this.oimg.onmouseout = function() {
			that.move();
		}
		oBtnNext.onmouseover=function(){
			clearInterval(that.time1);
			this.style.opacity=0.8;
		}
		oBtnNext.onmouseout = function() {
			that.move();
			this.style.opacity=0.3;
		}
		oBtnPrev.onmouseover=function(){
			clearInterval(that.time1);
			this.style.opacity=0.8;
		}
		oBtnPrev.onmouseout = function() {
			that.move();
			this.style.opacity=0.3;
		}
	}
}
